<template>
	<view class="shouye" :class="{IndexpopupShow:IndexpopupShow}">
		<view class="shoutop">
			<view class="city" @click="goaita()">
				<view class="citytit">
					{{city}}
				</view>
				<view class="cityicon">
					<image src="../../static/icons/chengi.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="sear" @click="gosearch()">
				<u-search placeholder="搜索医院、科室、医生、疾病" bgColor="#ffffff" height="50rpx" :showAction="false"
					v-model="keyword" disabled>
				</u-search>
			</view>
		</view>
		<view class="navlist">
			<view class="navlistmain">
				<view class="navitem" v-for="item in navlist" :key="item.id" @click="goMyDetails(item)">
					<view class="naviteml">
						<image :src="item.imgUrl" mode="aspectFit"></image>
					</view>
					<view class="navitemr">
						<p class="navitemrtit">{{item.title}}</p>
						<p class="navitemrinfo">{{item.remark}}</p>
					</view>
				</view>

			</view>
		</view>
		<!-- <button @click="pay()">支付</button> -->
		<view class="banner">
			<u-swiper :list="list1" :autoplay="false" circular :indicator="true" radius="10" height="180rpx"></u-swiper>
		</view>
		<view class="notice">
			<view class="noticetit">
				<span style="color: #3F86FF;">公告</span>头条
			</view>
			<view class="nline">
				|
			</view>
			<view class="ninfo">
				<swiper class="noticeban" circular :indicator-dots="false" :vertical="true" :autoplay="true"
					:interval="2000">
					<swiper-item v-for="item in noticelist" :key="item.id">
						<view class="contentn" @click="godetail(item)">{{item.title}}</view>
					</swiper-item>

				</swiper>

			</view>
		</view>
		<view class="jiuzhen" v-if="todaylist.length>0">
			<swiper class="jiuzhenbanner" circular :indicator-dots="true">
				<swiper-item>
					<view class="jiuzhenmain" :style="{height: scrollerHeight}">
						<view class="jiuzhenmainall">
							<view class="jiutop">
								<view class="jiutopl">
									<view class="jiuicon">
										<image src="../../static/icons/tixing.png" mode="aspectFit"></image>
									</view>
									<view class="jiutopltit">
										就诊提醒
									</view>
								</view>
								<view class="jiutopr">
									<view class="jiutoprtit">
										请您于今日就诊
									</view>
									<view class="jiudie" @click="changejiu()">
										<image v-if="isshow==true" src="../../static/icons/shang.png" mode="aspectFit">
										</image>
										<image v-if="isshow==false" src="../../static/icons/xia.png" mode="aspectFit">
										</image>
									</view>
								</view>
							</view>
							<view class="jiuzhenxin" v-if="isshow">
								<view class="jiuxinmain" v-for="item in todaylist" :key="item.id">
									<view class="xintop">
										<view class="xintopname">{{item.doctorName}}</view>
										<view class="xintopdep">{{item.deptName}})</view>
									</view>
									<view class="hosinfo">
										<view class="hosinfol">
											<view class="hosicon">
												<image src="../../static/icons/hos.png" mode="aspectFit"></image>
											</view>
											<view class="hosxin">
												<view class="hosname">{{item.hospitalName}}</view>
												<view class="hosaddress">{{item.hospitalAddress}}</view>
											</view>
										</view>
										<view class="hosinfor" @click="godingwei(item)">
											<image src="../../static/icons/dingwei.png" mode="aspectFit"></image>
										</view>
									</view>
									<view class="jiubot">
										<view class="gogua" @click="goorder()">
											我的挂号记录>
										</view>
										<view class="jiuti" @click="buzai(item)">
											不再提醒
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-modal :show="showti" title="温馨提示" @close="close()" :closeOnClickOverlay="true" content='您确定今日不再提醒吗？'
			@cancel="cancel()" :showCancelButton="true" @confirm="buzaitixing()"></u-modal>
		<my-nav-index></my-nav-index>
		<view class="nav_bottom">
			<index-hosp-list></index-hosp-list>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import homeApi from '@/api/home'
	import homeApii from '@/api/homee'
	import homeApiii from '@/api/homeee'
	import {
		searchNav,
		cityList
	} from '@/api/home/search.js'
	export default {
		provide() {
			return {
				scroll: this, //必须这样传才是响应式
			}
		},
		data() {
			return {
				list1: [

				],
				jiushow: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'Hello',
				value: "",
				city: "全部",
				showti: false,
				show: false,
				keyword: '',
				isshow: true,
				scrollerHeight: '370rpx',
				citylists: [
					"郑州",
					"开封",
					"洛阳",
					"安阳",
					"鹤壁",
					"许昌",
					"平顶山",
					"新乡",
					"焦作",
					"周口",
					"信阳"
				],
				navlist: [],
				bannerlist: "",
				noticelist: "",
				scrollLength: 0,
				token: "",
				todaylist: "",
				ghOrderNo: "",
				cityResult: [], //吴松返回地市接口，cityname，cityid
			}
		},
		onShow() {
			this.$store.state.doc.IndexpopupShow = false //冻结背景滑动
			// let healthCode=uni.getStorageSync("healthCode")
			uni.removeStorageSync("healthCode")
		},
		async onLoad(query) {
			//await this.gettoken()
			this.$store.state.doc.IndexpopupShow = false //冻结背景滑动
			await this.gettoken()
			this.cityListRes()
			this.city = '全部'
			this.getlocation()
			this.getnav()
			this.getbanner()
			this.getnotice()
			// this.getjiuzhen()
			this.navData()
		},
		methods: {
		pay(){
			wx.requestPayment({
				"timeStamp": "1702621364347",
				"nonceStr": "94d8e2b0d1ec40b19cd591eb3d2bac14",
				"package": "prepay_id=wx15142244381554273741621b5306990000",
				"signType": "RSA",
				"paySign": "MQmVyHdpCI97uEEB1VgaQJ2AfP60lD1oil6bGQ+2ngLN1e+zvQIg1t6RFXY22/ECpTN39TDWJT/c0fgOgBqxjpzAbYKegI5S5idcjivdxtt2fc9BbsuMXpR4w8KQPm7OTkaO82KN4f6qXjOq8SdZi6136s9RcWMOJW9YvUKAnO/0QGaXqqYSGASPE47R0tEPCG2sYcYUd65ZYobZvvlf/L2TD8Ubbc47C7LNIf7hmcg3nGq2r2xC4nRAH5K29xFS1VyOsAyHAhkokv1bafahEhLq2ivTYUWebdVdPsFWMtikqs2MZ2gTJFp9faoX1DVz4ZNCZPdxmXMAFoK1oAr4sw==",
				"success": function(res) {
					// uni.setStorageSync("orderId",that.info.orderId)
					// uni.navigateTo({
					// 	url:"/pages/successorder/successorder"
					// })
			
				},
				"fail": function(res) {
					
					console.log(res)
				},
				"complete": function(res) {}
			})
		},
			godetail(item){
				uni.navigateTo({
					url: "/pages/kepudetail/kepudetail?id=" + item.id
				})
			},
			goorder() {
				uni.navigateTo({
					url: "/pages/mine/mineorder/mineorder"
				})
			},
			close() {
				this.showti = false
			},
			cancel() {
				this.showti = false
			},
			buzaitixing() {
				homeApiii.notixing({
					ghOrderNo: this.ghOrderNo,
					token: this.token
				}).then(res => {
					if (res.code == 4000) {
						this.showti = false
						this.getjiuzhen()
						this.$forceUpdate();
					}
				})
			},
			buzai(item) {
				this.ghOrderNo = item.ghOrderNo
				this.showti = true

			},
			getjiuzhen() {
				homeApiii.getjiuzhen({
					token: this.token
				}).then(res => {
					if (res.code == 4000) {
						this.todaylist = res.data
						//console.log(res.data);
					}
				})
			},
			getnotice() {
				homeApi.getnotice({}).then(res => {
					console.log(res)
					this.noticelist = res.data
					//console.log(res.data);
				})
			},

			getnav() {
				homeApi.getnav({}).then(res => {
					console.log(res)
					if (res.code == 4000) {
						this.navlist = res.data
					}
				})
			},
			getbanner() {
				homeApi.getbanner({}).then(res => {
					//console.log(res)
					if (res.code == 4000) {
						this.bannerlist = res.data
						this.bannerlist.forEach(el => {
							this.list1.push(el.imgUrl)
						})
					}
				})
			},
			gosearch() {
				uni.navigateTo({
					url: "/pages/sousuo/index"
				})
			},
			//点击定位图标
			godingwei(item) {
				// 113.710018,34.753292
				var indexx = item.hospitalAddressGeo.indexOf(",")
				var resolve = item.hospitalAddressGeo.substring(0, indexx);
				let index = item.hospitalAddressGeo.indexOf(",");
				let result = item.hospitalAddressGeo.substr(index + 1, item.hospitalAddressGeo.length);
				let latitude = result
				let longitude = resolve
				wx.openLocation({
					longitude: longitude,
					latitude: latitude,
					name: item.hospitalName,
					address: item.hospitalAddress,
					success: res => {
						console.log(res);
					},
					fail: res => {
						console.log(res);
					},
				});
			},
			changejiu() {
				this.isshow = !this.isshow
				if (this.isshow == true) {
					this.scrollerHeight = "370rpx"
				}
				if (this.isshow == false) {
					this.scrollerHeight = "100rpx"
				}
			},

			errorIDNumber(e) {
				console.log('拒绝授权', e)
			},

			getOpenUserInfo() {
				wx.getOpenUserInfo({
					success: (res) => {
						let userInfo = JSON.parse(res.response).response
						console.log(userInfo)
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			getPhoneNumber() {
				//console.log(123)
				wx.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						console.log(encryptedData)

					},
					fail: (res) => {
						console.log(res);
					},
				});
			},
			gettoken() {
				return new Promise((resovle, reject) => {
					uni.login({
						provider: 'weixin',
						success: (res) => {
							console.log(res)
							this.code = res.code
							// this.getopenid()
							const authCode = res.authCode;
							homeApii.getopenid({
								code: this.code
							}).then(res => {
								//console.log(res)
								if (res.code == 4000) {
									uni.setStorageSync("token", res.data.token)
									this.$store.state.doc.token = res.data.token
									this.token = res.data.token
									this.INDEXHOSDATA()
									this.getjiuzhen()
									resovle()
								}
							})
						},
					})

				})
			},
			// getuserinfoo() {
			// 	my.getAuthCode({
			// 		scopes: 'auth_user',
			// 		success: res => {
			// 			const authCode = res.authCode;
			// 			console.log(authCode, "这是授权")
			// 		homeApii.getcard({authCode:authCode}).then(res=>{

			// 		})
			// 		},
			// 		fail: err => {
			// 			console.log('my.getAuthCode 调用失败', err)
			// 		}
			// 	});
			// },
			close() {
				this.show = false
			},
			goaita() {
				uni.navigateTo({
					url: "/pages/sousuo/selectCity/index"
				})
			},
			isHenan(res) { //这里判断了是否是河南地市，不是就传空，是就赋值后面搜索使用
				let result = this.cityResult.findIndex(v => {
					return v.id == res.cityAdcode
				})
				if (result !== -1) {
					this.$store.state.doc.IndexCityNav.id = res.cityAdcode || '' //城市码
					this.$store.state.doc.IndexCityNav.name = res.city || '' //城市
					this.$store.state.doc.zone.id = res.districtAdcode || '' //区码
					this.$store.state.doc.zone.name = res.district || '' //区名字
				}
				//console.log(this.$store.state.doc.IndexCityNav, this.$store.state.doc.zone,'aaa');
			},
			...mapMutations(['INDEXHOSDATA', 'ALLRESET']),
			getlocation() {
				wx.getLocation({
					type: 1, // 获取经纬度和省市区县数据
					success: (res) => {
						//console.log(res,'12111');
						// this.isHenan(res)
						// this.city = res.city
						// this.city = this.city.slice(0, -1);
						// let iscity = false
						// this.cityLists = []
						// this.cityResult.map((v) => {
						// 	this.cityLists.push(v.name) //获取吴松接口的地市
						// })
						this.$store.state.doc.geoList = res
						// this.citylists.forEach((el) => {
						// 	if (el == this.city) {
						// 		iscity = true
						// 	}
						// })

						// //console.log(this.$store.state.doc.geoList,'geoList')
						let latitude = res.latitude
						let longitude = res.longitude
						uni.setStorageSync("latitude", latitude)
						uni.setStorageSync("longitude", longitude)
						this.INDEXHOSDATA()
						// if (iscity) {
						// 	uni.setStorageSync("city", this.city)
						// 	//this.$store.state.doc
						// } else {
						// 	this.city = "全部"
						// 	uni.setStorageSync("city", this.city)
						// 	uni.removeStorageSync("latitude")
						// 	uni.removeStorageSync("longitude")
						// }

					},
					fail: (res) => {
						console.log(res)
						// this.city = "全部"
						// uni.setStorageSync("city", this.city)
						// uni.removeStorageSync("latitude")
						// uni.removeStorageSync("longitude")
					},
					complete: () => {},
				});
			},
			async navData() {
				let result = await searchNav('hos')
				this.$store.state.doc.navIndexData.selectGroup = result.data.selectGroup
				this.$store.state.doc.navIndexData.aiSortGroup = result.data.aiSortGroup
			},
			goMyDetails(params) {
				if (params.title == "按疾病") {
					uni.navigateTo({
						url: "/pages/sousuo/search_type/index?type=jibing"
					})
					return
				}
				if (params.title == "按科室") {
					uni.navigateTo({
						url: "/pages/sousuo/search_type/index?type=keshi"
					})
				}
			},
			async cityListRes() {
				let res = await cityList()
				this.cityResult = res.data
				//console.log(res.data,'111aaa');
			},
			// indexListShow() {
			// 	this.ALLRESET('index') //重置
			// },
			onReachBottom() { //下拉
				this.INDEXHOSDATA('roll')
			},
			onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替,滚动距离
				//console.log(e);
				if (!this.IndexpopupShow) {
					this.$store.state.doc.topHight = e.scrollTop
					this.scrollLength = e.scrollTop
				}
				//console.log("滚动距离为：" + e.scrollTop);
			},
		},
		computed: {
			IndexpopupShow() {
				return this.$store.state.doc.IndexpopupShow
			}
		},
		watch: {
			'$store.state.doc.IndexCityNav.id'(ne, ol) {
				this.city = this.$store.state.doc.IndexCityNav.id !== '' ? this.$store.state.doc.IndexCityNav.name : '全部'
			},
		},
	}
</script>
<style>
	.u-modal__content {
		text-align: center;
	}
</style>
<style lang="scss" scoped>
	.IndexpopupShow {
		position: fixed;
		overflow: hidden;
	}

	.shouye {
		background-color: #F5F6F8;
		padding-bottom: 100rpx;
		padding-top: 120rpx;

		.shoutop {
			width: 93%;
			margin: 0 auto;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			

			.city {
				font-size: 30rpx;
				line-height: 60rpx;
				display: flex;
				font-weight: bold;
				flex-shrink: 0;

				.cityicon {
					width: 20rpx;
					height: 20rpx;
					background-color: #fff;
					border-radius: 50%;
					text-align: center;
					line-height: 10rpx;
					margin-top: 18rpx;
					margin-left: 5rpx;

					image {
						width: 10rpx;
						height: 8rpx;
					}
				}
			}

			.sear {
				width: 85%;
			}
		}

		.navlist {
			width: 93%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 40rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;

			.navlistmain {
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				.navitem {
					width: 50%;
					display: flex;

					.naviteml {
						width: 95rpx;
						height: 95rpx;
						border-radius: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}

					.navitemr {
						margin-left: 20rpx;

						.navitemrtit {
							font-size: 26rpx;
							line-height: 48rpx;
							font-weight: bold;
							color: #3D3D3D;
							margin-top: 5rpx;
						}

						.navitemrinfo {
							width: 200rpx;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							word-wrap: break-word;
							white-space: normal !important;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							font-size: 20rpx;
							color: #999999;

						}
					}
				}
			}
		}

		.banner {
			width: 93%;
			margin: 20rpx auto;
			border-radius: 15rpx;

		}

		.jiuzhen {
			width: 93%;
			margin: 20rpx auto;
			border-radius: 15rpx;

			.jiuzhenbanner {
				height: 100%;

				.jiuzhenmain {
					width: 99%;
					margin: 0 auto;

					// height: 310rpx;
					.jiuzhenmainall {
						width: 99%;
						margin: 0 auto;
						background-color: #4581F6;
						border-radius: 15rpx;
						padding-bottom: 3rpx;
						overflow: hidden;

						.jiutop {
							width: 90%;
							margin: 30rpx auto;

							display: flex;
							justify-content: space-between;

							.jiutopl {
								display: flex;

								.jiuicon {
									width: 30rpx;
									height: 30rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.jiutopltit {
									margin-left: 10rpx;
									font-size: 32rpx;
									line-height: 30rpx;
									color: #fff;
									font-weight: bold;
								}
							}

							.jiutopr {
								display: flex;

								.jiutoprtit {
									margin-right: 10rpx;
									font-size: 24rpx;
									color: #fff;
									line-height: 30rpx;
									letter-spacing: 2rpx;
								}

								.jiudie {
									width: 30rpx;
									height: 30rpx;
									background-color: #fff;
									border-radius: 50%;
									text-align: center;
									line-height: 20rpx;

									image {
										width: 15rpx;
										height: 10rpx;
									}
								}
							}
						}

						.jiuzhenxin {
							width: 99%;
							margin: 0 auto;
							border-radius: 15rpx;
							background-color: #fff;
							overflow: hidden;
							padding-bottom: 20rpx;

							.jiuxinmain {
								width: 92%;
								margin: 0 auto;
								margin-top: 20rpx;
								overflow: hidden;

								.xintop {
									display: flex;
									margin-top: 20rpx;

									.xintopname {
										font-size: 35rpx;
										color: #3D3D3D;
										font-weight: bold;
										line-height: 30rpx;

									}

									.xintopdep {
										margin-left: 15rpx;
										background-color: #EFF7FF;
										color: #0F91F7;
										font-size: 20rpx;
										padding-left: 10rpx;
										line-height: 35rpx;
										height: 35rpx;
										padding-right: 10rpx;
										border-radius: 5rpx;
									}
								}

								.hosinfo {
									display: flex;
									justify-content: space-between;
									margin-top: 20rpx;

									.hosinfol {
										display: flex;

										.hosicon {
											width: 65rpx;
											height: 65rpx;
											border-radius: 50%;
											background-color: #4581F6;
											text-align: center;
											line-height: 75rpx;
											margin-top: 10rpx;

											image {
												width: 30rpx;
												height: 30rpx;
											}
										}

										.hosxin {
											margin-left: 20rpx;


											.hosname {
												width: 480rpx;
												font-size: 28rpx;
												font-weight: bold;
												line-height: 50rpx;
												color: #3D3D3D;
												display: -webkit-box;
												overflow: hidden;
												text-overflow: ellipsis;
												word-wrap: break-word;
												white-space: normal !important;
												-webkit-line-clamp: 1;
												-webkit-box-orient: vertical;

											}

											.hosaddress {
												width: 480rpx;
												font-size: 22rpx;
												color: #999999;
												display: -webkit-box;
												overflow: hidden;
												text-overflow: ellipsis;
												word-wrap: break-word;
												white-space: normal !important;
												-webkit-line-clamp: 1;
												-webkit-box-orient: vertical;

											}
										}
									}

									.hosinfor {
										width: 50rpx;
										height: 50rpx;
										border-radius: 50%;
										margin-top: 10rpx;
										text-align: center;
										border: 1rpx solid #EEEEEE;
										overflow: hidden;

										image {
											width: 30rpx;
											height: 30rpx;
											margin-top: 10rpx;
											border-radius: 50%;
										}
									}
								}
							}

							.jiubot {
								display: flex;
								margin-top: 30rpx;
								margin-bottom: 10rpx;

								.gogua {
									width: 170rpx;
									text-align: center;
									height: 40rpx;
									background-color: #4581F6;
									line-height: 40rpx;
									font-size: 20rpx;
									color: #fff;
									border-radius: 20rpx;
								}

								.jiuti {
									font-size: 20rpx;
									margin-left: 20rpx;
									line-height: 40rpx;
									color: #3D3D3D;
								}
							}
						}
					}
				}

			}

		}

		.notice {
			width: 93%;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 15rpx;
			line-height: 80rpx;
			display: flex;

			.noticetit {
				margin-left: 20rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				color: #3D3D3D;
				font-weight: bold;
			}

			.nline {
				margin-left: 20rpx;
				color: #3D3D3D;
				font-size: 24rpx;
			}

			.ninfo {
				width: 500rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #979797;


				.noticeban {

					height: 80rpx;

					.contentn {
						width: 480rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}

				}
			}
		}

		.nav_bottom {
			margin-top: 20rpx;
		}
	}
</style>